<!-- PieEcharts -->
<template>
  <div :id="pieEchartsId" :style="styles"></div>
</template>

<script>
import echarts from '@/utils/echarts'
export default {
  name: 'PieEcharts',
  components: {},
  data () {
    return {
    }
  },
  props: {
    type: {
      type: String,
      default: 'pie'
    },
    data: {
      type: Array,
      default: () => []
    },
    name: {
      type: String,
      default: ''
    },
    total: {
      type: String,
      default: ''
    },
    pieEchartsId: {
      type: String,
      default: 'pie-chart'
    },
    styles: {
      type: Object,
      default: () => {
        return { width: '130px', height: '130px' }
      }
    }
  },
  watch: {
    'data': {
      handler: function (value) {
        this.drawPie(value)
      },
      deep: true
    }
  },
  computed: {},
  mounted () {
    this.drawPie()
  },
  methods: {
    drawPie (data, name, total) {
      data = data || this.data
      name = name || this.name
      total = total || this.total
      let myChart = echarts.init(document.getElementById(this.pieEchartsId))
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          position: function (pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            var obj = { top: 60 }
            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
            return obj
          },
          padding: [5, 5, 5, 5]
        },
        series: [
          {
            name: name,
            type: 'pie',
            radius: ['60%', '80%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: total,
                color: '#666666',
                fontSize: 23
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            // data: [{ value: 8, name: '娱乐会所', itemStyle: { color: '#2db7f5' } }]
            data: data
          }
        ]
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
